<template>
  <div class="wrapper">
    <div class="inline-l">
      <h1>{{priceTitle|keepTwoNum}}元</h1>
      <h2 class="title">{{news.title}}</h2>
      <p class="time">{{Time}}</p>
    </div>
    <div class="inline-r">
      <svg class="icon jl" aria-hidden="true">
        <use xlink:href="#icon-grzx_jl"></use>
      </svg>
      <p class="tips">{{tips}}</p>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
  import Moment from 'moment';
  export default {
    name: 'newsItem',
    props: {
      news: {
        type: Object
      }
    },

    data() {
      return {
        tips: '奖励到账提醒'
      };
    },
    created() {
       // console.log(1111, parseFloat(this.news.money));
    },
    filters: {
      keepTwoNum: function (val) {
        let value = Number(val);
        return value.toFixed(2);
      }
    },
    computed: {
      priceTitle() {
        return this.news.money;
      },
      priceInfo() {
        return parseFloat(this.news.money);
      },
      Time() {
        return this.dateFormat(new Date(this.news.created * 1000));
      }
    },
    methods: {
      dateFormat(val) {
        return Moment(val).format('YYYY-MM-DD HH:mm:ss');
      }
    }
  };
</script>

<style scoped lang="stylus" rel="stylesheet/stylus">
  @import "../../assets/stylus/main.styl";
  .wrapper {
    padding 3vw
    box-sizing border-box
    flex-x(center, flex-start);
    position relative
    width vw(345)
    height vw(90)
    font-family PingFangSC-Regular
    .inline-l {
      flex: 3
      flex-y(flex-start, flex-start);
      & > h1 {
        position absolute
        margin-bottom 2vw
        width: 61vw;
        line-height vw(25)
        height vw(25)
        multi(2);
        word-vw(18, main-color)
      }
      & > h2 {
        position absolute
        margin-top vw(20)
        line-height vw(20)
        height vw(20)
        width vw(325)
        ellipsis()
        word-vw(14, third-ash)
        top vw(15)
      }
      & p {
        position absolute
        bottom 3vw
        left: 3vw
        height vw(17)
        line-height vw(17)
        word-vw(12, first-ash)
      }
      .label{
        padding: 2px 3px;
        border-radius(4px);
        word-vw(14,main-color)
        margin-right 2vw
      }
    }
    .inline-r {
      flex: 1
      flex-y(center, flex-end);
      & p {
        word(vw(11), third-ash)
        position absolute
        right vw(5)
        top vw(10)
      }
      & .jl {
        position absolute
        top vw(10)
        right vw(90)
        width vw(13.45)
        height vw(14.48)
        fill main-color
      }
    }
  }

</style>
